<template>
  <div>
    <div id="grid"></div>
    <el-dialog title="设置网格" :visible.sync="dialogVisible">
      <el-radio-group v-model="picked">
        <el-radio :label="0">入口</el-radio>
        <el-radio :label="1">墙</el-radio>
        <el-radio :label="2">路</el-radio>
        <el-radio :label="3">出口</el-radio>
      </el-radio-group>
      <div class="selectConfirm">
        <el-button @click="changeGrid()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Grid from "./Grid";
import { debuglog } from "util";
export default {
  name: "HelloWorld",
  data() {
    return {
      dialogVisible: false,
      picked: null,
      grid: null,
      selectGrid: null,
      // 0:start, 1:wall, 2:road, 3:exit
      gridArr: new Array(16).fill(1)
    };
  },
  methods: {
    changeGrid() {
      this.dialogVisible = false;
      let gridIndex = this.selectGrid.getAttribute("gridIndex");
      if (this.picked === 0 && this.gridArr.indexOf(0) !== -1) {
        let oldStartIndex = this.gridArr.indexOf(0);
        let oldStartGrid = this.grid.getGrid(oldStartIndex);
        this.gridArr[oldStartIndex] = 1;
        this.renderGridByType(1, oldStartGrid);
      } else if (this.picked === 3 && this.gridArr.indexOf(3) !== -1) {
        let oldExitIndex = this.gridArr.indexOf(3);
        let oldExitGrid = this.grid.getGrid(oldExitIndex);
        this.gridArr[oldExitIndex] = 1;
        this.renderGridByType(1, oldExitGrid);
      }
      this.renderGridByType(this.picked, this.selectGrid);
      this.gridArr[gridIndex] = this.picked;
    },
    clickAction(e) {
      this.dialogVisible = true;
      this.selectGrid = e.target;
    },
    renderGridByType(type, grid) {
      switch (type) {
        case 0:
          grid.setAttribute("class", "start");
          break;
        case 1:
          grid.setAttribute("class", "wall");
          break;
        case 2:
          grid.setAttribute("class", "road");
          break;
        case 3:
          grid.setAttribute("class", "exit");
          break;
        default:
          grid.setAttribute("class", "wall");
          break;
      }
    }
  },
  created() {},
  mounted() {
    this.grid = new Grid({
      container: document.getElementById("grid"), // 必须项
      // backgroundImage:"url(/img/background.8662b7c8.png)",
      colCount: 4,
      rowCount: 4,
      width: 600,
      height: 600,
      clickAction: this.clickAction
    });

    for (let i = 0; i < this.gridArr.length; i++) {
      // 封装的grid数组是一个一维数组
      let item = this.grid.getGrid(i);
      this.renderGridByType(this.gridArr[i], item);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
#grid {
  background-image: url("../assets/background.png");
}
.wall {
  background: url("../assets/maze_sprite.png") -10px -10px;
}
.start {
  background: url("../assets/maze_sprite.png") -10px -180px;
}
.exit {
  background: url("../assets/maze_sprite.png") -180px -10px;
}
.road {
  background: transparent;
}
.selectConfirm {
  margin-top: 10px;
}
</style>
